<template>
  <div class="indexStyle">
    <div>
  <el-menu  class="el-menu-demo" mode="horizontal" @select="handleSelect">
  <el-menu-item index="1">分类</el-menu-item>
  <el-submenu index="2">
    <template slot="title">我的工作台</template>
    <el-menu-item index="2-1">已投标</el-menu-item>
    <el-menu-item index="2-2">进行中</el-menu-item>
    <el-menu-item index="2-3">已完成</el-menu-item>
<!--    <el-submenu index="2-4">-->
<!--      <template slot="title">选项4</template>-->
<!--      <el-menu-item index="2-4-1">选项1</el-menu-item>-->
<!--      <el-menu-item index="2-4-2">选项2</el-menu-item>-->
<!--      <el-menu-item index="2-4-3">选项3</el-menu-item>-->
<!--    </el-submenu>-->
  </el-submenu>
    <el-menu-item index="3">排名</el-menu-item>
  <el-menu-item index="4">投诉</el-menu-item>
<div class="logo"><img src="@/assets/2.jpg" alt=""></div>
<el-menu-item index="5" popper-class="test" style="left:72%">
<el-dropdown trigger="click" >
  <span class="el-dropdown-link">
    nihao
  </span>
  <el-dropdown-menu slot="dropdown" >
    <el-dropdown-item @click.native="func">退出登录</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>
</el-menu-item >
<!-- <div class="name">nihao</div> -->
</el-menu>
    </div>
    <router-view/>
  </div>
</template>

<script>
export default {
methods:{
  handleSelect(){
    console.log(111,this)
  },
  func(){
    console.log(1199991)
    this.$router.push('/')
    //释放浏览器缓存
    sessionStorage.clear()
  }
}
}
</script>

<style lang="less" scoped>
  .indexStyle{
    width: 100%;
    height: 100%;
    /*background-color: red;*/
  }
.logo{

  width: 54px;
  height: 54px;
  border-radius: 50%;
  overflow: hidden;
  position: absolute;
  right: 8%;
  top: 50%;
  transform: translate(0,-50%);
  img{
    width: 100%;
    height: 100%;
  }
}
.name{
  width: 100px;
  height: 54px;
  // border-radius: 50%;
  // overflow: hidden;
  position: absolute;
  right: 100px;
  top: 50%;
  transform: translate(0,-50%);
}
.test{
  background-color: red;
}
</style>
